身為想減少雜事，早點下班認真向上，追求開發效率的前端工程師，或多或少都會仰賴一些工具來幫助我們達到特定目的。像是 -
使用瀏覽器的開發者工具進行除錯、效能檢查、確認樣式；
或者安裝瀏覽器的擴充功能格式化 json；
又或者使用產生器，取得漂亮的曲線漸層的 CSS 樣式等等。
因此，熟悉工具雖然不是工程師必點的技能樹之一。但如果能適當運用的話，在開發過程中就能減少許多不必要的人工，甚至能間接提升程式的品質。
接下來我會根據工具的種類與用途，分別做基本介紹和應用
這裡會列出預計產出的文章主題，並且提供連結可方便查閱。詳細的名稱或內容會再根據當天的定稿有所異動。
| 天數 | 主題 | 已完成 |
|---|---|---|
| 瀏覽器開發工具 | ||
| 02 | 基本篇 | V |
| 03 | 元素篇 | V |
| 04 | 樣式篇 | V |
| 05 | 除錯篇(上) | V |
| 06 | 除錯篇(下) | V |
| 07 | 效能篇(上) | V |
| 08 | 效能篇(下) | V |
| 09 | 網路篇 | V |
| 10 | 資源篇 | V |
| 11 | 擴充功能篇 | V |
| 12 | 燈塔篇 | V |
| 13 | 自行開發篇 | V |
| 樣式與視覺 | ||
| 14 | 色彩好用工具 | V |
| 15 | 十大 CSS 樣式產生器 | V |
| 16 | Google Webfonts Helper | V |
| 17 | Placeholder & Fake Data | V |
| 18 | 免費授權圖庫 ＆ 圖示庫 | V |
| 其他 | ||
| 19 | Web 前端充電站 | V |
| 20 | JSON | |
| 21 | 正規表達式 | |
| 22 | Windows 切換 NodeJS 版本 - NVM | V |
| 23 | Code Playground | |
| 24 | 實現技術的查詢 | V |
| VSCode Plugin | ||
| 25 | TabNine | V |
| 26 | Edge Tools | |
| 27 | WakaTime | V |
| 28 | Debug Visualizer | V |
| 29 | Other | V |
萬事起頭難，不過第一天也這樣用力擠完啦 
今年還很有勇氣的報名另外兩個主題，如果有興趣的話也歡迎訂閱喔！
iThome鐵人賽
看影片追技術